/*
pic[0][]: 0-x,1-y,//2-width, 3-height
circle[0][]: 0-x,1-y,2-r,3-color
line[0][]: 0-x0,1-y0,2-x1,3-y1,4-color
*/
window.onload = function(){
    try{
	    // creating canvas objects
	    var canvas = document.getElementById("myCanvas");
	    var ctx = canvas.getContext('2d');
	    
	    //var source = "WebContent/score.jpg";
	    //loadImg(ctx, source,30,30);
	    drawLine(ctx,1,1,40,40,"red");
		//drawRect(ctx,30,40,20,10,"");
		for (var circle_i=0; circle_i<point.length; circle_i++){
	    drawCircle(ctx, point[circle_i][0], point[circle_i][1], 10,point[circle_i][2]);
	    }
    }
    catch(exception){
        alert("Ordinate Data Error! Please check again!");
    }
};

function loadImg(ctx, source, x, y){
	var img=new Image();
	img.onload = function(){
	ctx.drawImage(img,x,y);
	};
	img.src=source;
}

function drawLine(ctx,x0,y0,x1,y1,color){
	ctx.moveTo(x0,y0);
	ctx.lineTo(x1,y1);
	if (color != ""){
		ctx.strokeStyle = color;
	};
	ctx.stroke();
}

function drawCircle(ctx, x0, y0, r, color){
	if (color != ""){
		ctx.fillStyle=color;
	};
	ctx.beginPath();
	ctx.arc(x0,y0,r,0,Math.PI*2,true);
	ctx.closePath();
	ctx.fill();
}

function drawRect(ctx, x0, y0, a, b, color){
	if (color != ""){
		ctx.fillStyle=color;
	};
	ctx.fillRect(x0,y0,a,b);
}